<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

	<title>Ejemplo</title>

	<!-- Se cargaran los archivos desde las carpeta de atras. -->
	<link rel="stylesheet" type="text/css" href="../ejemplos.css"/>
	<script type="text/javascript" src="../../../js/lib.js"></script>
	<script type="text/javascript" src="../../../js/ajax.js"></script>
</head>

<body>

	<h1>Ejemplo #2</h1>

	<p>En este ejemplo se mostrará como enviar datos a una funcion PHP usando formularios y obtener su resultado. El
	formulario tiene tres numeros que se multiplicaran.
	</p>

	<div class="code">
		<div>
			<b>Código del botón del formulario (cuando se hace click):</b>

			<pre>
function botonPresionado ()
{
	var formulario = document.getElementById("el_formulario");

	var datos =
	{
		num1: formulario.numero1.value,
		num2: formulario.numero2.value,
		num3: formulario.numero3.value
	};

	Ajax.request (formulario.action, datos, function (respuesta)
	{
		document.getElementById("resultado").innerHTML = respuesta.VALOR;
	});
}
			</pre>
		</div>

		<div>
			<b>Código del archivo <em>multiplicar.php</em>:</b>

			<pre>
&lt;?php

	$num1 = isset($_REQUEST['num1']) ? $_REQUEST['num1'] : 0;
	$num2 = isset($_REQUEST['num2']) ? $_REQUEST['num2'] : 0;
	$num3 = isset($_REQUEST['num3']) ? $_REQUEST['num3'] : 0;

	$valor = $num1 * $num2 * $num3;

	$resultado = array (
		'VALOR' => $valor
	);

	echo json_encode ($resultado);

?&gt;
			</pre>
		</div>
	</div>

	<div class="result">
		<b>Resultado:</b>

		<div>
			<form id="el_formulario" action="multiplicar.php" onsubmit="botonPresionado(); return false;">

				<label>Numero 1:</label>
				<input type="text" name="numero1"/>
				<br/>

				<label>Numero 2:</label>
				<input type="text" name="numero2"/>
				<br/>

				<label>Numero 3:</label>
				<input type="text" name="numero3"/>
				<br/>

				<br/>
				<hr/>
				<input type="submit" value="Enviar Formulario"/>
			</form>

			<h4 id="resultado">(Resultado va a ir aqui)</h4>
		</div>
	</div>

	<script>

		function botonPresionado ()
		{
			var formulario = document.getElementById("el_formulario");

			var datos =
			{
				num1: formulario.numero1.value,
				num2: formulario.numero2.value,
				num3: formulario.numero3.value
			};

			Ajax.request (formulario.action, datos, function (respuesta)
			{
				document.getElementById("resultado").innerHTML = respuesta.VALOR;
			});
		}

	</script>

</body>

</html>

